<template>
  <!-- 放置一个图标 -->
  <div class="screenWrapper">
    <svg-icon
      :icon-class="isFullScreen ? 'exit-fullscreen' : 'fullscreen'"
      class="fullscreen"
      @click="toggleScreen"
    />
  </div>
</template>

<script>
import screenfull from 'screenfull'
// 全屏切换
// 1、找到可以进行全屏切换的底层API [由浏览器内置提供]
// 2、交互形式： 如果当前是非全屏状态 点击就变成全屏 如果已经是全屏状态 点击就变成退出全屏

// icon图的切换
// 思路：根据当前的是否全屏的状态切换 svg-icon组件中 icon-class的值

// esc退出的 bug
// 表现： 浏览器按esc退出了 但是本地维护的状态 isfullscreen没有跟着一起变 他还是开启状态 没有变为FALSE
// 解决思路： 监听一下现在是否退出了全屏 一旦发现他不是全屏模式了 就立刻把 isfullscreen设置为false 和全屏状态保持一致
// 技术解决：
// 1、如何监听是否退出了全屏 -》 给window添加一个fullscreenchange监听事件 只要你切换了全屏状态 事件回调就会执行
// 2、如何得知当前浏览器的状态是否退出了全屏状态 -》 document.fullscreenElement
export default {
  name: 'ScreenFull',
  data() {
    return {
      isFullScreen: false // false非全屏 || true全屏
    }
  },
  mounted() {
  // 原生的判断浏览器是否全屏的方法
    // window.addEventListener('fullscreenchange', () => {
    //   console.log('浏览器全屏状态为：', document.fullscreenElement)
    //   const isFull = document.fullscreenElement
    //   if (isFull == null) {
    //     this.isFullScreen = false
    //   }
    // })

    // screen 插件的判断方法
    screenfull.on('change', () => {
      console.log(screenfull.isFullscreen)
      // 把自己用来控制图标显示的isFullScreen 和人家给到的是否全屏保持一致
      this.isFullScreen = screenfull.isFullscreen
    })
  },
  methods: {
    toggleScreen() {
    // 这是原生 js的写法， 退出全屏的方法 有兼容性问题
      // // 全屏切换 取反操作
      // if (this.isFullScreen) {
      //   // 退出全屏
      //   document.exitFullscreen()
      // } else {
      //   // 开启全屏
      //   document.documentElement.requestFullscreen()
      // }
      // // 对isFullScreen进行取反操作 始终和全屏模式相匹配
      // this.isFullScreen = !this.isFullScreen

      // 使用 screenfull插件实现
      // 来回的取反操作
      screenfull.toggle()
    }
  }
}
</script>

<style lang="scss" scoped>
.screenWrapper {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>
